import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableHighlight,
    ScrollView,
    ToastAndroid,
} from 'react-native';

import ArgFuncHelper from './helper/ArgFuncHelper';

class CustomButton extends React.Component {
    render() {
        return (
            <TouchableHighlight
                style={styles.button}
                underlayColor="#a5a5a5"
                onPress={this.props.onPress}>
                <Text style={styles.buttonText}>{this.props.text}</Text>
            </TouchableHighlight>
        );
    }
}

export default class PageArgFunc extends Component {
    argFuncHelper = null;

    constructor(props){
        super(props);
        this.argFuncHelper = new ArgFuncHelper();
    };

    render() {
        return (
            <ScrollView>
                <View>
                    <Text style={styles.welcome}>测属性与方法</Text>

                    {/*<CustomButton text='测试箭头函数' onPress={this.testArrow('测试箭头函数成功')}/>*/}
                    <CustomButton onPress={() => this.argFuncHelper.testArrow('测试箭头函数成功')}           text='测试箭头函数(带参)'   />
                    <CustomButton onPress={this.argFuncHelper.testBindWithNoArg.bind(this)}               text='测试无参bind函数'     />
                    <CustomButton onPress={() => this.argFuncHelper.testBindWithArg('测试有参bind函数成功')} text='测试有参bind函数'     />

                    <CustomButton onPress={() => this.argFuncHelper.testReadClassArg()}         text='测试读取Class属性'    />
                    <CustomButton onPress={() => this.argFuncHelper.testReadObjectArg()}        text='测试读取Object属性'    />
                    <CustomButton onPress={() => this.argFuncHelper.testReadSameArg()}          text='测试读取同名(都有)属性' />
                    <CustomButton onPress={() => this.argFuncHelper.testReadSameArgByArrow()}   text='测试箭头函数读取同名(都有)属性' />
                    <CustomButton onPress={() => this.argFuncHelper.testThiz()}                 text='测试thiz' />

                    <CustomButton onPress={() => this.argFuncHelper.testArrowA()}   text='测试A调B(箭头)' />
                    <CustomButton onPress={() => this.argFuncHelper.testA()}        text='测试A调B' />

                    <CustomButton onPress={() => this.testLocalSet()}       text='测试本地Set调用远程属性' />
                    <CustomButton onPress={() => this.testLocalGet()}       text='测试本地Get调用远程属性' />
                    <CustomButton onPress={() => this.testLocalObjSet()}    text='测试本地Set调用远程对象属性' />
                    <CustomButton onPress={() => this.testLocalObjGet()}    text='测试本地Get调用远程对象属性' />

                    <CustomButton onPress={() => this.testAddStore()}    text='添加' />
                    <CustomButton onPress={() => this.testRemoveStore()} text='清除' />
                    <CustomButton onPress={() => this.testGetStore()}    text='查询' />
                </View>
            </ScrollView>
        );
    };

    testLocalSet(){
        this.argFuncHelper.sameNameArg = '通过local修改之后的Helper的Object相同属性名的属性的值';
        ToastAndroid.show('设置成功', ToastAndroid.SHORT);
    }

    testLocalGet(){
        this.argFuncHelper.testReadSameArg();
    }

    testLocalObjSet(){
        this.argFuncHelper.setXiaomingName('小明');
        ToastAndroid.show('设置成功', ToastAndroid.SHORT);
    }

    testLocalObjGet(){
        ToastAndroid.show(this.argFuncHelper.getXiaomingName(), ToastAndroid.SHORT);
    }

    testAddStore(){
        this.argFuncHelper.setStore('key', '小小小');
        ToastAndroid.show('设置成功', ToastAndroid.SHORT);
    }

    testRemoveStore(){
        this.argFuncHelper.removeStore('key');
        ToastAndroid.show('清除成功', ToastAndroid.SHORT);
    }

    testGetStore(){
        this.argFuncHelper.getStore('key', (ret) => {
            ToastAndroid.show(ret, ToastAndroid.SHORT);
        });

    }
}

const styles = StyleSheet.create({
    welcome: {
        fontSize: 18,
        textAlign: 'center',
        margin: 10,
        alignSelf: 'center',
    },
    content:{
        fontSize: 13,
        textAlign: 'left',
        margin: 10,
    },
    button: {
        margin:5,
        backgroundColor: 'white',
        padding: 15,
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: '#cdcdcd',
    }
});
